const webpack = require('webpack')
const path = require('path')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const DashboardPlugin = require('webpack-dashboard/plugin')

const vendor = [
  'react',
  'react-dom',
  'react-router',
  'redux',
  'react-redux'
]

module.exports = {
  devtool: 'source-map',
  progress: true,
  noInfo: true,
  target: 'web',
  cache: true,
  context: path.join(__dirname, '../'),
  entry: {
    main: './src/index.js',
    vendor: vendor
  },
  output: {
    path: path.join(__dirname, '../dev'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  },
  module: {
    loaders: [{
      test: /\.js[x]?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        cacheDirectory: true,
        presets: [
          'es2015',
          'stage-0',
          'react',
          'react-hmre'
        ]
      }
    }, {
      test: /\.css$/,
      loader: 'style!css!postcss'
    }, {
      test: /\.less/,
      loader: 'style!css!less'
    }, {
      test: /\.scss$/,
      loaders: ['style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]', 'postcss', 'sass?outputStyle=expanded&sourceMap'],
      exclude: /node_modules/
    }, {
      test: /\.(png|jpg|jpeg|gif)$/,
      loader: 'url-loader?limit=1024&name=images/[hash:6].[ext]'
    }, {
      test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
      loader: 'url'
    }]
  },
  resolve: {
    modulesDirectories: [
      path.join(__dirname, '../node_modules')
    ],
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new DashboardPlugin(),
    new CopyWebpackPlugin([{
      context: './src/assets/images',
      from: '**/*',
      to: './assets/images'
    }, {
      context: './src/assets/iconFont',
      from: '**/*',
      to: './assets/iconFont'
    }]),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new HtmlWebpackPlugin({
      title: '志愿百科',
      filename: 'index.html',
      template: './src/index.html',
      inject: true
    }),
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      },
      '__DEV__': true
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ],
  devServer: {
    contentBase: './dev',
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    lazy: false,
    noInfo: true,
    port: 3001,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://xxxxxxx',
        changeOrigin: true
      }
    }
  },
  postcss: function(webpack) {
    return [
      require('postcss-import')({
        addDependencyTo: webpack
      }),
      require('postcss-url')(),
      require('postcss-browser-reporter')(),
      require('postcss-reporter')()
    ]
  }
}